@config.main("Primer designer") {

    <style>
            .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
                padding-left: 0;
                padding-right: 0;
            }


            #fasta {
                display: none;
            }

            p {
                font-size: 16px;
            }

            .length {
                color: #3498db;
                width: 60px;
            }

            .blue {
                color: #3498db;
            }

            .orange {
                color: #f39c12;
            }

            td {
                font-size: 16px;
            }

            .table > thead > tr > th {
                border-bottom: none;
            }

            .table > tbody > tr > td {
                border-top: none;
            }

            .tableHead {
                background-color: #3498db;
                color: white;
                font-size: 16px;
            }

            .tableText {
                background-color: #F39C12;
                color: white;
            }

            .tableText:hover {
                background-color: #e08e0b;
            }

            .tableBorder {
                background-color: #F9F9F9;
            }

            .tableBorder:hover {
                background-color: #ECF0F1;
            }

            .tableNoBorder:hover {
                background-color: #ECF0F1;
            }


            .has-feedback .form-control {
                padding-right: 0;
            }


    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Primer designer",detail = "Primer3 is a widely used program for designing PCR primers (PCR = \"Polymerase Chain Reaction\"). PCR is an essential and ubiquitous tool in genetics and molecular biology. Primer3 can also design hybridization probes and sequencing primers. ")

            <div class="main-body">


                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">

                        @components.radio("Type of query", "method", "range", Seq(("range", "Range"), ("seq", "Seq")), "ChangeMethod()", labelBox = "3")

                        <div id="range" style="width: 100%;
                            display: flex;
                            flex-wrap: wrap;">
                            @components.species("3", "6")
                            @components.chr("3", "6")
                            @components.text("Start position", "start", "", "6", "6", "6")
                            @components.text("End position", "end", "", "6", "3", "6")
                        </div>

                        <div id="fasta" style="width: 100%;">
                        @components.textarea("Enter FASTA sequences", "queryText", "queryText", "getExample()")

                        </div>
                        <h5 style="margin-left: 40px">Parameter Selection:</h5>

                        @components.text("Sequence target", "SEQUENCE_TARGET", "50,350", "12", "3", "6")
                        @components.text("Product Size Ranges", "PRIMER_PRODUCT_SIZE_RANGE", "100-300,300-600,600-1000", "12", "3", "6")

                        @components.text("Optimal primer size", "PRIMER_OPT_SIZE", "20", "4", "9", "3")
                        @components.text("Max primer size", "PRIMER_MAX_SIZE", "25", "3", "8", "4")
                        @components.text("Min primer size", "PRIMER_MIN_SIZE", "18", "3", "8", "4")

                        @components.text("Optimal primer TM", "PRIMER_OPT_TM", "59.0", "4", "9", "3")
                        @components.text("Max primer TM", "PRIMER_MAX_TM", "62.0", "3", "8", "4")
                        @components.text("Min primer TM", "PRIMER_MIN_TM", "57.0", "3", "8", "4")

                        @components.text("Optimal GC percent", "PRIMER_OPT_GC_PERCENT", "50.0", "4", "9", "3")
                        @components.text("Max GC percent", "PRIMER_MAX_GC", "80.0", "3", "8", "4")
                        @components.text("Min GC percent", "PRIMER_MIN_GC", "20.0", "3", "8", "4")

                        @components.text("Max #N's accepted", "PRIMER_MAX_NS_ACCEPTED", "0", "4", "9", "3")
                        @components.text("Max Poly-X", "PRIMER_MAX_POLY_X", "10", "3", "8", "4")
                        @components.text("Max Internal Poly-X", "PRIMER_INTERNAL_MAX_POLY_X", "15", "3", "8", "4")

                        @components.text("Max Self Complementarity", "PRIMER_MAX_SELF_ANY", "45.0", "4", "9", "3")
                        @components.text("Max 3' Self Complementarity", "PRIMER_MAX_SELF_END", "35.0", "6", "8", "2")

                        @components.text("Max Pair Complementarity", "PRIMER_PAIR_MAX_COMPL_ANY", "45.0", "4", "9", "3")
                        @components.text("Max 3' Pair Complementarity", "PRIMER_PAIR_MAX_COMPL_END", "35.0", "6", "8", "2")
                    </div>


                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>

                    </div>

                </form>


                <div id="result" style="display: none;">

                </div>

            </div>
        </div>
    </div>

    <script>

            $(function () {
                ChangeMethod()
                formValidation()
                getChr()


            })


            function getChr() {
                let species = $("#species").val()
                $.post("/hordeum/search/getChr?species=" + species, (data) => {
                    $("#chr").empty().select2({data:data})
                })
            }

            function Search() {
                let form = $("#form");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "@routes.ToolsController.primer()",
                        type: "post",
                        data: form.serialize(),
                        success: function (data) {
                            layer.close(index);

                            if (data.valid === "false") {
                                swal("Error", data.message, "error");
                                $("#result").hide()
                            } else {
                                let $result = $("#result")
                                $result.html(data.result);
                                $result.show();
                                let target_top = $result.offset().top ;
                                $("html,body").animate({scrollTop: target_top}, 800);
                            }
                        }
                    });
                }
            }

            function ChangeMethod() {
                let value = $("input[name=method]:checked").val()
                if (value === "range") {
                    $("#range").show()
                    $("#fasta").hide()
                } else {
                    $("#fasta").show()
                    $("#range").hide()
                }
            }

            function getExample() {
                let seq = "AACCCTAAACCTAAACCCTAAACCCTAAACCCTAAACCCTAACCCTAAACCCTAAACGCTAAACCCTAAACCCTAAACCCTAAACCCTAAACCCTAAACCCTAAACCCTAAACCCTAACCCTAAACCCTAAACCCTAACCCTAAACCCTAAACCCTAAACCCTAACCCTAAACCCTAAACCCTAAACCCTAAACCCTAAACCCTAAACAGCTGACAGTACGATAGATCCACGCGAGAGGAACCGGAGAGACAACGGGATCCAGGCGCCAGCGACGGATCCGGGCGAGAGGGGAGTGGAGATCATGGATCCGTGCGGGAGGGGAAGAAGTCGCCGAATCCGACCCTCCCATCGCCATCGACAGTAGGTCTGCGCGAGAGGGGCACCGGCGCTGGCTCTGAGCGAGATGCAACGCCGGCCGGCTTGGAGAGTAACTCAAGAGAGACAGAATGGAAGATAGAGAACAAGAGAGTGAGAGGATAAGGATATAGACCAGACCACACAATTTTCTCTTCTTTTTAACTTTGTATTAAGATCTTTTATGGAACATCTTTTATTGTTGATATCAAAATAACTGAAACTTATACTTTAATATTTTTTGAGACAAAAAGTAACAATCGTAAAAAAAAGTTCCACGAGAGTTACCCCACCACCCATGTCTCGAGCCGACCAGATCTGCCGCCCACGACCCGAGTCATCGTTGGATCCACCACCCACAACCCGCGACCGAGCTACGCCTCCTGTGGATTGATGCCACTGCCCTGAGCTTCACTGCCGGTACTGTCGCTCGCGACCCGAGCTCCGCCGCTGGTACCGTCGCCCACAACTCAAGCTGTGTTGCCACTAGAGAAAAAGGAGGCGAGAGCGAGGGCAAAACGAGGCAAGGCGTGGCGTGACATGGTGTGACTGGTTGGTCAATTAGCCGACAATGGATCCACCGCCCATGAACCGAGCCACCGTTGGATCCGCCACCCGCAGATTCGGCTGTCCCCTCTCCCTCA"
                $("#queryText").val(seq)
            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        start: {
                            validators: {
                                notEmpty: {
                                    message: 'Start position is required！'
                                },
                                numeric: {
                                    message: 'Start position must be number！'
                                },
                                greaterThan: {
                                    value: 0,
                                    message: "Start position must greater than or equal to 0！"
                                },
                                callback: {
                                    message: 'Start position must less than end position!',
                                    callback: function (value, validator) {
                                        var end = $("#end").val();
                                        if (end === "" || value === "") {
                                            return true;
                                        } else {
                                            validator.updateStatus("end", validator.STATUS_VALID, 'callback');
                                            return parseInt(value) < parseInt(end);
                                        }
                                    }
                                }
                            }
                        },
                        end: {
                            validators: {
                                notEmpty: {
                                    message: 'End positionis required！'
                                },
                                numeric: {
                                    message: 'End position must be number！'
                                },
                                greaterThan: {
                                    value: 0,
                                    message: "End position must greater than or equal to 0！"
                                },
                                callback: {
                                    message: 'End position must greater than start position!',
                                    callback: function (value, validator) {
                                        var start = $("#start").val();
                                        if (start === "" || value === "") {
                                            return true;
                                        } else {
                                            validator.updateStatus("start", validator.STATUS_VALID, 'callback');
                                            return parseInt(start) < parseInt(value);
                                        }
                                    }
                                }
                            }
                        },
                        queryText:{
                            validators: {
                                notEmpty: {
                                    message: 'FASTA sequences is required！'
                                }
                            }
                        },
                        SEQUENCE_TARGET: {
                            validators: {
                                notEmpty: {
                                    message: 'Sequence target is required！'
                                }
                            }
                        },
                        PRIMER_OPT_SIZE: {
                            validators: {
                                notEmpty: {
                                    message: 'Optimal primer size is required！'
                                },
                                integer: {
                                    message: 'Optimal primer size must be integer！'
                                }
                            }
                        },
                        PRIMER_MAX_SIZE: {
                            validators: {
                                notEmpty: {
                                    message: '>Max primer size is required！'
                                },
                                integer: {
                                    message: '>Max primer size must be integer！'
                                }
                            }
                        },
                        PRIMER_MIN_SIZE: {
                            validators: {
                                notEmpty: {
                                    message: 'Min primer size is required！'
                                },
                                integer: {
                                    message: 'Min primer size must be integer！'
                                }
                            }
                        },
                        PRIMER_OPT_TM: {
                            validators: {
                                notEmpty: {
                                    message: 'Optimal primer TM is required！'
                                },
                                numeric: {
                                    message: 'Optimal primer TM must be number！'
                                }
                            }
                        },
                        PRIMER_MAX_TM: {
                            validators: {
                                notEmpty: {
                                    message: 'Max primer TM is required！'
                                },
                                numeric: {
                                    message: 'Max primer TM must be number！'
                                }
                            }
                        },
                        PRIMER_MIN_TM: {
                            validators: {
                                notEmpty: {
                                    message: 'Min primer TM is required！'
                                },
                                numeric: {
                                    message: 'Min primer TM must be number！'
                                }
                            }
                        },
                        PRIMER_OPT_GC_PERCENT: {
                            validators: {
                                notEmpty: {
                                    message: 'Optimal GC percent is required！'
                                },
                                numeric: {
                                    message: 'Optimal GC percent must be number！'
                                }
                            }
                        },
                        PRIMER_MAX_GC: {
                            validators: {
                                notEmpty: {
                                    message: 'Max GC percent is required！'
                                },
                                numeric: {
                                    message: 'Max GC percent must be number！'
                                }
                            }
                        },
                        PRIMER_MIN_GC: {
                            validators: {
                                notEmpty: {
                                    message: 'Min GC percent is required！'
                                },
                                numeric: {
                                    message: 'Min GC percent must be number！'
                                }
                            }
                        },
                        PRIMER_MAX_NS_ACCEPTED: {
                            validators: {
                                notEmpty: {
                                    message: "Max #N's accepted is required！"
                                },
                                integer: {
                                    message: "Max #N's accepted must be integer！"
                                }
                            }
                        },
                        PRIMER_MAX_POLY_X: {
                            validators: {
                                notEmpty: {
                                    message: 'Max Poly-X is required！'
                                },
                                integer: {
                                    message: 'Max Poly-X must be integer！'
                                }
                            }
                        },
                        PRIMER_INTERNAL_MAX_POLY_X: {
                            validators: {
                                notEmpty: {
                                    message: 'Max Internal Poly-X is required！'
                                },
                                integer: {
                                    message: 'Max Internal Poly-X must be integer！'
                                }
                            }
                        },
                        PRIMER_MAX_SELF_ANY: {
                            validators: {
                                notEmpty: {
                                    message: 'Max Self Complementarity is required！'
                                },
                                numeric: {
                                    message: 'Max Self Complementarity must be number！'
                                }
                            }
                        },
                        PRIMER_MAX_SELF_END: {
                            validators: {
                                notEmpty: {
                                    message: "Max 3' Self Complementarity is required！"
                                },
                                numeric: {
                                    message: "Max 3' Self Complementarity must be number！"
                                }
                            }
                        },
                        PRIMER_PAIR_MAX_COMPL_ANY: {
                            validators: {
                                notEmpty: {
                                    message: 'Max Pair Complementarity is required！'
                                },
                                numeric: {
                                    message: 'Max Pair Complementarity must be number！'
                                }
                            }
                        },
                        PRIMER_PAIR_MAX_COMPL_END: {
                            validators: {
                                notEmpty: {
                                    message: "Max 3' Pair Complementarity is required！"
                                },
                                numeric: {
                                    message: "Max 3' Pair Complementarity must be number！"
                                }
                            }
                        }
                    }
                });
            }


    </script>
}